<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/7/25
  Time: 12:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>鱼骨图</title>
    <link rel="stylesheet" type="text/css" href="pc/css/cores/style.css" /><!--公共样式-->
    <link rel="stylesheet" type="text/css" href="pc/css/extends/list.css" /><!--翻页插件样式-->
    <link rel="stylesheet" type="text/css" href="pc/css/cores/alert.css" /><!--弹出盒样式-->
    <link rel="stylesheet" type="text/css" href="pc/css/cores/public.css" /><!--公共样式-->
    <link rel="stylesheet" type="text/css" href="pc/css/modules/fishBone.css" /><!--鱼骨样式-->
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
</head>
<style>
    ::-webkit-scrollbar
    {
        width: 5px;
        height: 5px;
    }
    ::-webkit-scrollbar-track-piece
    {
        background-color: #ebebeb;
        -webkit-border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:vertical
    {
        height: 32px;
        background-color: #ccc;
        -webkit-border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:horizontal
    {
        width: 22px;
        background-color: #ccc;
        -webkit-border-radius: 4px;
    }
    .mySelect{
        position: relative;
    }
    .mySelect .inputWrap{
        width:100%;
        min-height: 35px;
        border: 1px solid #dfdfdf;
        border-radius: 3px;
        position: relative;
        cursor: pointer;
    }
    .mySelect ul{
        padding:0 5px ;
        margin: 0;
        padding-right: 35px;
    }
    .mySelect ul,li{
        list-style: none;
    }
    .mySelect li{
        display: inline-block;
        background: #f0f2f5;
        padding: 0 4px;
        margin: 2px 5px 5px 0;
        border-radius: 5px;
    }
    .mySelect .fa-close{
        cursor: pointer;
        color: #999;
        font-size: 12px;
    }

    .mySelect .mySelect-option{
        width: 100%;
        border: 1px solid #ccc;
        max-height: 200px;
        overflow-y: scroll;
        position: absolute;
        height: 0;
        opacity: 0;
        background: #fff;
        z-index: 99;
    }
    .mySelect .mySelect-option div{
        padding: 5px;
    }
    .mySelect .inputWrap>i{
        position: absolute;
        padding: 10px;
        right: 0;
        top: 0;
    }
    .mySelect-option div{
        cursor: pointer;

        padding: 3px;
    }
    .mySelect-option div i{
        float: right;
        color: #ffffff;
        font-size: 10px;
        padding-top: 5px;
    }
    .mySelect-option div:hover{
        background:  rgb(64, 142, 230);
        color: #fff;
    }
    .publicBtn{
        margin-left: 20px;
        position: fixed;
        bottom: 30px;
        left: 45%;
        z-index: 99;

    }
    .fishBone{
        margin-top:20px;
    }
    .fishBone .wrapper .bd{
        height: 100%;
    }
    .previewBox{
        width: 98%;
        left: 1%;
        top: 2%;
        height: 96%;
        overflow: hidden;
        z-index: 99;
    }
    .mb{
        z-index: 99;
    }
    .links{
        color: #787878;
        display: inline-block;
        padding: 0 5px;
        font-size: 13px;
    }
    .Mark1{
        background: #408ee6;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
        margin-left: 5px;
    }
    .Mark4{
        background: #efbd81;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
        margin-left: 5px;
    }
    .page1{
        position: fixed;
        left: 5px;
        top: 433px;
        width: 10px;
        font-size: 12px
    }
    .page2{
        position: fixed;
        right: 8px;
        top: 433px;
        width: 10px;
        font-size: 12px
    }
    .fishBone .item .title .title-center{
        background: #408ee6;
    }
    .fishBone .item .title .title-bot{
        border-radius: 4px;
        padding: 0 5px;
        font-size: 15px;
        font-weight: bold;
        font-family: '微软雅黑';
        line-height: 2.1em;
        color: white;
        display: inline-block;
        background: #efbd81;
    }
    .bd{
        /*width:1000px;*/
    }
    .fishBone .item .titleBot{
        bottom:-190px;
        display: block;
        position: relative;
        left: -33px;
        background: url(../../images/line-point.png) no-repeat 12px -212px
    }
    .fishBone .item.bottom .titleBot{
        bottom: -190px;
    }
    .mainul{
        height: 60px;
        width: 600px;
        padding: 0;
        margin: 0;
    }
    .mainul li{
        display: inline-block;
        text-align: center;
        width: 100px;

        list-style: none;
        cursor: pointer;
        height: 35px;
        line-height: 35px;
        border:1px solid #dfdfdf;
        margin-right: 15px;
        border-radius: 8px;
    }
    .mainul .choice{
        border:1px solid red;
        color: red;
    }

    #box .tab-items{
        display: none;

    }
    #box .show {
        display: block;
    }
    .xueqi{
        color: #C82011;
        font-size: 19px;
        margin-top: 25px;
    }


</style>
<body>
<div class="crumbs">
    <div class="fl returnBox">&ensp;
    </div>
    <div class="fl noticeBox"><img src="pc/images/ico_trumpet.png" />
        <div class="noticeBar">
            <ul>
                <li>当前暂无消息</li>
            </ul>
        </div>
    </div>
</div>
<div class="mainContent">
    <ul class ='mainul'>
        <li tabid="1"  class="choice">第一学期</li>
        <li tabid="2" >第二学期</li>
        <li tabid="3">第三学期</li>
        <li tabid="4">第四学期</li>
    </ul>
    <div id="box">
        <div class="tab-items show">

            <span class="page1">上一页</span>
            <span class="page2">下一页</span>
            <div style="float: left;position: relative; line-height: 42px;" class="add" >添加课程:&nbsp;</div>
            <div id="mySelect" class="mySelect" style="width: 250px;float: left"></div>
            <div class="fl publicBtn sure" >确定</div>
            <div style="clear: both; margin-bottom: 10px;"></div>
            <div class="xueqi">第一学期</div>
            <div class="fishBone" ></div>

        </div>
        <div class="tab-items ">

            <span class="page1">上一页</span>
            <span class="page2">下一页</span>
            <div style="float: left;position: relative; line-height: 42px;" class="add" >添加课程:&nbsp;</div>
            <div  class="mySelect" style="width: 250px;float: left"></div>
            <div class="fl publicBtn sure2" >确定</div>
            <div style="clear: both; margin-bottom: 10px;"></div>
            <div class="xueqi">第二学期</div>
            <div class="fishBone" ></div>
        </div>
        <div class="tab-items">
            <span class="page1">上一页</span>
            <span class="page2">下一页</span>
            <div style="float: left;position: relative; line-height: 42px;" class="add" >添加课程:&nbsp;</div>
            <div id="mySelect" class="mySelect" style="width: 250px;float: left"></div>
            <div class="fl publicBtn sure3" >确定</div>
            <div style="clear: both; margin-bottom: 10px;"></div>
            <div class="xueqi">第三学期</div>
            <div class="fishBone" ></div>

        </div>
        <div class="tab-items">
            <span class="page1">上一页</span>
            <span class="page2">下一页</span>
            <div style="float: left;position: relative; line-height: 42px;" class="add" >添加课程:&nbsp;</div>
            <div id="mySelect" class="mySelect" style="width: 250px;float: left"></div>
            <div class="fl publicBtn sure4" >确定</div>
            <div style="clear: both; margin-bottom: 10px;"></div>
            <div class="xueqi">第四学期</div>
            <div class="fishBone" ></div>

        </div>
    </div>



</div>
<div class="mb" ></div>
<div class="popup previewBox" >
    <div class="popup_box">
        <div style="margin: 40px 0"> <img class="popup_img" src="pc/images/ico_examDel.png"></div>
        <div class="popup_box_content"></div>
    </div>
</div>
</body>

<script src="pc/js/extends/jquery-1.11.2.min.js"></script>
<script src="pc/js/extends/bootstrap-datetimepicker.min.js"></script>
<script src="pc/js/extends/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="pc/js/extends/jquery.page.js"></script><!--翻页插件-->


<script src="pc/js/cores/Alert.js"></script><!--弹出盒-->
<script src="pc/js/cores/public.js"></script><!--公共-->

<script src="pc/js/extends/fishBone.js"></script>
<script src="pc/js/extends/select.js"></script>
<script src="pc/js/cores/jquery.SuperSlide.2.1.1.js"></script>
<script type="text/javascript">

    var  self = this
    let n = 1
    var addCaurse=''
    $('.mainul li').click(function() {

        var i = $(this).index();//下标第一种写法法
        n=i+1
        postData(n)
        seletData(n)
        $(this).addClass('choice').siblings().removeClass('choice');
        // $('.tab-items').eq(i).show().siblings().hide();
        $('.tab-items').removeClass("show");
        $(".tab-items").eq($(this).index()).addClass("show");
    });
    //初始化数据
    postData(n)
    function postData () {
        $.ajax({
            type: "get",
            url: "FishboneDiagramAction/FishboneDiagramActionInfo?xqcount="+n,
            async: true,
            success: function(data) {
                var new_data = JSON.parse(data)
                $(".fishBone").fishBone(new_data.courseList,new_data.url);

            },
            error: function(data) {
                var json = JSON.stringify({
                    "pageName": "error"
                });
                window.location.href = "skipPage?jsonStr=" + json;
            }
        });
    }
    //获取下拉列表
    seletData(n)
    var mySelect;
    function  seletData() {
        $.ajax({
            type: "post",
            url: "FishboneDiagramAction/query?xqcount="+n,
            async: true,
            contentType:"application/json ",
            success: function(data) {
                var new_data = JSON.parse(data)
                var select =[];
                if(new_data.listinfo.length == 0){
                    $('.mySelect').hide()
                    $('.add').hide()
                    $(".sure").hide()
                }else{
                    $('.mySelect').show()
                    $('.add').show()
                    $(".sure").show()
                    for(var i=0;i<new_data.listinfo.length;i++){
                        select.push(new_data.listinfo[i])

                    }
                    $(".mySelect").html("");
                    mySelect= $(".mySelect").mySelect({
                        mult:true,//true为多选,false为单选
                        option:select,
                        onChange:function(res){//选择框值变化返回结果
                            addCaurse = res.join(',')
                        }
                    });
                }
            },
            error: function(data) {
                var json = JSON.stringify({
                    "pageName": "error"
                });
                window.location.href = "skipPage?jsonStr=" + json;

            }
        });
    }
    //点击删除
    $(document).on('click','.cirle2',function(){
        var  obj = {}
        var  courseName = $(this).parent().find('.title-center').text()
        var  courseId  = $(this).parent().parent().find('.line-first').attr('data-id')
        obj.updateInfo = 'delete'
        obj.courseName = courseName
        obj.courseId = courseId
        confirm1.content = "确认要删除课程吗？"
        confirm1.success = function() {
            $.ajax({
                type: "post",
                url: "FishboneDiagramAction/UpdateFishboneDiagramActionInfo?xqcount="+n,
                async: true,
                //contentType:"application/json ",
                data: {
                    "jsonStr": JSON.stringify(obj)
                },
                success: function (data) {
                    var msgNew = JSON.parse(data)
                    if (msgNew.result == "success") {
                        self.alert1("删除成功");
                        Alert1.success = function () {
                            self.postData()
                            self.seletData();
                        };

                    }
                },
                error: function (data) {
                    var json = JSON.stringify({
                        "pageName": "error"
                    });
                    window.location.href = "skipPage?jsonStr=" + json;

                }
            });
        }
        confirm1.init();
        confirm1.show();
    })
    //点击删除
    $(document).on('click','.cirle',function(){
        var  obj = {}
        var  courseName = $(this).parent().find('.title-center').text()
        var  courseId  = $(this).parent().parent().find('.line-first').attr('data-id')
        obj.updateInfo = 'delete'
        obj.courseName = courseName
        obj.courseId = courseId
        confirm1.content = "确认要删除课程吗？"
        confirm1.success = function() {
            $.ajax({
                type: "post",
                url: "FishboneDiagramAction/UpdateFishboneDiagramActionInfo?xqcount="+n,
                async: true,
                //contentType:"application/json ",
                data: {
                    "jsonStr": JSON.stringify(obj)
                },
                success: function (data) {
                    var msgNew = JSON.parse(data)
                    if (msgNew.result == "success") {
                        self.alert1("删除成功");
                        Alert1.success = function () {
                            self.postData()
                            self.seletData();
                        };

                    }
                },
                error: function (data) {
                    var json = JSON.stringify({
                        "pageName": "error"
                    });
                    window.location.href = "skipPage?jsonStr=" + json;

                }
            });
        }
        confirm1.init();
        confirm1.show();
    })
    //添加课程 // 第一学期
    $(".sure").click(function(){
        if( $(".inputWrap>ul>li").length == 0){
            self.alert1("请添加课程");
            seletData();
            return
        }
        var  obj = {}
        obj.updateInfo = 'save'
        obj.courseId =  addCaurse
        obj.courseName =  ''

        $.ajax({
            type: "post",
            url: "FishboneDiagramAction/UpdateFishboneDiagramActionInfo?xqcount=1 ",
            async: true,
            //contentType:"application/json ",
            data: {
                "jsonStr": JSON.stringify(obj)
            },
            success: function(data) {
                var msgNew = JSON.parse(data)
                if(msgNew.result == "success") {
                    self.alert1("添加成功");
                    $(".mySelect ul").html('');
                    seletData(1);
                    postData(1)
                }
            },
            error: function(data) {
                var json = JSON.stringify({
                    "pageName": "error"
                });
                window.location.href = "skipPage?jsonStr=" + json;

            }
        });

    })
    //// 第二学期
    $(".sure2").click(function(){
        if( $(".inputWrap>ul>li").length == 0){
            self.alert1("请添加课程");
            seletData();
            return
        }
        var  obj = {}
        obj.updateInfo = 'save'
        obj.courseId =  addCaurse
        obj.courseName =  ''

        $.ajax({
            type: "post",
            url: "FishboneDiagramAction/UpdateFishboneDiagramActionInfo?xqcount=2 ",
            async: true,
            //contentType:"application/json ",
            data: {
                "jsonStr": JSON.stringify(obj)
            },
            success: function(data) {
                var msgNew = JSON.parse(data)
                if(msgNew.result == "success") {
                    self.alert1("添加成功");
                    $(".mySelect ul").html('');
                    seletData(2);
                    postData(2)
                }
            },
            error: function(data) {
                var json = JSON.stringify({
                    "pageName": "error"
                });
                window.location.href = "skipPage?jsonStr=" + json;

            }
        });

    })
    ////第三学期
    $(".sure3").click(function(){
        if( $(".inputWrap>ul>li").length == 0){
            self.alert1("请添加课程");
            seletData();
            return
        }
        var  obj = {}
        obj.updateInfo = 'save'
        obj.courseId =  addCaurse
        obj.courseName =  ''

        $.ajax({
            type: "post",
            url: "FishboneDiagramAction/UpdateFishboneDiagramActionInfo?xqcount=3",
            async: true,
            //contentType:"application/json ",
            data: {
                "jsonStr": JSON.stringify(obj)
            },
            success: function(data) {
                var msgNew = JSON.parse(data)
                if(msgNew.result == "success") {
                    self.alert1("添加成功");
                    $(".mySelect ul").html('');
                    seletData(3);
                    postData(3)
                }
            },
            error: function(data) {
                var json = JSON.stringify({
                    "pageName": "error"
                });
                window.location.href = "skipPage?jsonStr=" + json;

            }
        });

    })
    ///第四学期
    $(".sure4").click(function(){
        if( $(".inputWrap>ul>li").length == 0){
            self.alert1("请添加课程");
            seletData();
            return
        }
        var  obj = {}
        obj.updateInfo = 'save'
        obj.courseId =  addCaurse
        obj.courseName =  ''

        $.ajax({
            type: "post",
            url: "FishboneDiagramAction/UpdateFishboneDiagramActionInfo?xqcount=4",
            async: true,
            //contentType:"application/json ",
            data: {
                "jsonStr": JSON.stringify(obj)
            },
            success: function(data) {
                var msgNew = JSON.parse(data)
                if(msgNew.result == "success") {
                    self.alert1("添加成功");
                    $(".mySelect ul").html('');
                    seletData(4);
                    postData(4)
                }
            },
            error: function(data) {
                var json = JSON.stringify({
                    "pageName": "error"
                });
                window.location.href = "skipPage?jsonStr=" + json;

            }
        });

    })
    //alert提示
    var Alert1 = new Alert();
    function alert1(content1) {
        Alert1.contenthead = "提示";
        Alert1.content = content1;

        Alert1.init();
        Alert1.show();
    }
    //confirm提示
    var confirm1 = new Confirm();
    function confirmEnd(content1,method1){
        confirm1.contenthead="提示";
        confirm1.content = content1;
        confirm1.success=method1;
        confirm1.init();
        confirm1.show();

    }
    //鼠标经过显示全部top
    $(document).on('mouseenter',' .title-center',function(e){
        $(this).parent().parent().find('.mask').slideDown()

    })
    $(document).on('mouseleave',' .content',function(e){
        $(this).parent().find('.mask').slideUp()

    })
    //鼠标经过显示全部bot
    $(document).on('mouseenter',' .title-bot',function(e){
        $(this).parent().parent().find('.mask').slideDown()

    })

    //点击跳转
    $(document).on('click',' .links',function(e){
        var url = $(this).attr('data-url')
        var resources = $(this).attr('data-resources')

        //var  resourcesName = resources.replace(/\s*/g,"")

        $('.mb').css('display','block')
        $('.previewBox').css('display','block')

        if(resources == ''){
            $('.popup_box_content').html("<iframe  name='virMBoxes'  src='pc/page/noResourceShow.html'  frameborder=\"0\" style=\"width: 100%;height: 107%;\"></iframe>")
        }else{
            $('.popup_box_content').html("<iframe  name='virMBoxes'  src='"+ url + resources +"'  frameborder=\"0\" style=\"width: 100%;height: 107%;\"></iframe>")
        }

    })
    $('.popup_img').click(function () {
        $('.mb').css('display','none')
        $('.previewBox').css('display','none')
    })
</script>
</html>
